<!-- 修改用户 -->
<template>
  <Modal
    class="add_form"
    v-model="modal"
    title="导入知识库"
    :mask-closable="false"
    draggable
    sticky
    scrollable
    @on-cance="cancel"
    @on-visible-change="cancel"
    width="1000px"
  >
    <p class="title">选择导入的数据文件</p>

    <Form ref="formEl" :model="formData">
      <div class="flex_form_item">
        <FormItem label="数据文件" required>
          <Upload accept=".xls, .xlsx" :before-upload="beforeUpload">
            <Button icon="ios-cloud-upload-outline">上传知识库文件</Button>
          </Upload>

          <div v-if="formData.cusfile">
            <span>{{ formData.cusfile.name }}</span>
          </div>
        </FormItem>

        <div class="template-content">
          <div class="tip">
            <span class="require-icon">*</span>
            <p>(需要导入的知识库数据Excel文件)</p>
          </div>

          <!-- <a href="/template/knowledge_template.xlsx" download="knowledge_template.xlsx">
            <Icon type="md-arrow-down" />
            <span> 下载模板</span>
          </a> -->
          <a href="#" @click="downFile">
            <Icon type="md-arrow-down" />
            <span> 下载模板</span>
          </a>
        </div>
      </div>
    </Form>

    <p class="title">选择导入的数据文件</p>

    <div class="tips">
      <p>第一步：上传用户账号数据的Excel文件</p>
      <p>第二步：选择Excel里的列与系统知识库的字段对应关系</p>
      <p>第三步：开始导入知识库数据</p>
    </div>

    <p class="title error-tip">
      系统自动匹配知识字段功能，需下载模板，把用户账号数据直接导入，使用更加方便、快捷、智能
    </p>

    <template #footer>
      <Button @click="cancel">取消</Button>
      <Button type="primary" :loading="loading" @click="submit">立即导入</Button>
    </template>
  </Modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import { faq } from '@/api/modules/knowledgeBase'
import { Message } from 'view-ui-plus'
import { fetchFile } from '@/api/modules/downStaticFile'

const emit = defineEmits(['cancel', 'success'])

const props = defineProps({
  currentTypeData: Object
})
// 是否打开弹窗
const modal = true
// 加载
const loading = ref(false)

// 表单元素ref
const formEl = ref(null)

// 表单字段
const formData = ref({
  cusfile: ''
})

const beforeUpload = (file) => {
  formData.value.cusfile = file
  return false
}

const downFile = () => {
  fetchFile('/template/knowledge_template.xlsx', 'knowledge_template.xlsx')
}

/**
 * 提交表单
 */
const submit = async () => {
  if (!formData.value.cusfile) {
    return Message.warning('请上传文件')
  }

  try {
    loading.value = true

    await faq.impsave({
      type: props.currentTypeData.id,
      files: formData.value.cusfile
    })

    Message.success('成功上传')
    emit('success')
  } catch (error) {
    console.log(error)
  }

  loading.value = false
}

/**
 * 取消表单
 */
const cancel = () => {
  emit('cancel')
}
</script>

<style scoped lang="scss">
.template-content {
  .tip {
    display: flex;
    .require-icon {
      color: #ed4014;
    }
  }
}

.ivu-form {
  margin-bottom: 30px;
  padding-left: 30px;
}

.title {
  color: #1e90ff;
  padding: 6px 16px;
  background-color: #f2f2f2;
  margin-bottom: 16px;
}

.tips {
  margin-bottom: 30px;
  padding-left: 30px;
  > p {
    margin-bottom: 12px;
  }
}

.error-tip {
  color: red;
  background-color: #ffffe0;
}
</style>
